<template>
  <v-container>
    <v-row>
      <v-col cols="auto" class="pa-1" v-for="(imgBase64,i) in imageShow" :key="i">
        <v-card :height="picScale" :width="picScale" >
          <v-img :height="picScale" :width="picScale" :src="imgBase64" @click="showImg(imgBase64)">
            <v-icon color="red darken-2" @click.stop="removeImage(i)">
              mdi-close-circle-outline
            </v-icon>
          </v-img>
        </v-card>
      </v-col>
      <v-col cols="auto" class="pa-1" v-for="(imgUrl,i) in existedImgs" :key="i+imageShow.length">
        <v-card :height="picScale" :width="picScale" >
          <v-img :height="picScale" :width="picScale" :src="imgUrl" @click="showImg(imgUrl)">
            <v-icon color="red darken-2" @click.stop="removeExistedImage(i)">
              mdi-close-circle-outline
            </v-icon>
          </v-img>
        </v-card>
      </v-col>
      <v-col cols="auto" class="pa-1"  v-if="imageShow.length+initImgs.length<maxCount">
        <image-uploader
            :debug="1"
            :maxHeight="imageSize"
            :quality="0.9"
            :autoRotate=true
            :preview=false
            :className="['fileinput']"
            outputFormat="verbose"
            :capture="false"
            accept="image/*"
            @input="setImage"
        >
          <label for="fileInput" slot="upload-label">
            <v-card :width="picScale" :height="picScale" class="d-flex flex-column align-center justify-center">
              <v-icon class="d-block" size="40">
                mdi-plus
              </v-icon>
              <div class="text-caption">
                添加图片{{ imageShow.length+initImgs.length }}/{{maxCount}}
              </div>

            </v-card>
          </label>
        </image-uploader>
      </v-col>
    </v-row>
    <show-big-image
      :show="showBigImg"
      :src="imgSrc"
      @dismiss="showBigImg =false"
    >

    </show-big-image>
  </v-container>
</template>

<script>
import ImageUploader from "vue-image-upload-resize"
import ShowBigImage from "./ShowBigImage";
import {baseUrl,imgPrefixUrl} from "../myConfig";
import {printMsg} from "../util/util";

export default {
  name: "MyImageUpload",
  components:{ShowBigImage, ImageUploader},
  props:{
    imageSize:{
      default:500,
      type:Number
    },
    maxCount:{
      default:5,
      type:Number
    },
    initImgs:{
      default:()=>[],
      type:Array
    },
  },
  data:()=>({
    picScale: 95,
    imageShow: [],
    showBigImg:false,
    imgSrc:'',
  }),
  watch:{
    imageShow:{
      handler(){this.onUpdate()},
      deep:true
    },
    initImgs:{
      handler(){this.onUpdate()},
      deep:true
    }
  },
  methods:{
    setImage: function (output) {
      printMsg(output,this)
      if (output.info.orgHeight<output.info.newHeight){
        let oHeight = output.info.orgHeight
        let oWidth = output.info.orgWidth
        printMsg(`压缩图片： orgheight:${oHeight} orgWidth:${oWidth}`,this)
        //压缩回原大小
        let canvas = document.createElement("canvas")
        let context = canvas.getContext("2d")
        let img = new Image()
        img.onload= ()=>{
          canvas.width = oWidth
          canvas.height = oHeight
          printMsg(`压缩中： orgheight:${oHeight} orgWidth:${oWidth}`,this)
          context.clearRect(0,0,oWidth,oHeight)
          context.drawImage(img,0,0,oWidth,oHeight)
          output.dataUrl = canvas.toDataURL("image/jpeg",0.9)
          output.info.newHeight = oHeight
          output.info.newWidth = oWidth
          printMsg(output,this)
          this.imageShow.push(output.dataUrl)
        }
        img.src=output.dataUrl
      }else{
        printMsg(output,this)
        this.imageShow.push(output.dataUrl)
      }
    },
    removeImage: function (index) {
      this.imageShow.splice(index, 1)
    },
    removeExistedImage: function (index) {
      this.initImgs.splice(index, 1)
    },
    showImg:function (img){
      this.showBigImg = true
      this.imgSrc = img
    },
    onUpdate:function (){
      this.$emit('onUpdate',{
        new:this.imageShow,
        old:this.initImgs
      })
    },
    clear:function (){
      this.imageShow = []

    }
  },
  computed:{
    existedImgs:function (){
      return this.initImgs.map(a=>baseUrl+imgPrefixUrl+a)
    }
  }
}
</script>

<style scoped>

</style>
